在需要提示，或是小分頁顯示時

通常我們會選擇 Dialog 彈跳視窗

這邊的使用背景是在D14時，如果商品有任何問題，我們可以在點選問號時給予他一個彈窗

首先先寫觸發的函式
以及關閉的函示

 const handleClose = () => {
    setOpen(false);
  };
   const Open = () => {
    setOpen(Open);
  };

接著再套用元件
open 將你要open的動作寫入
onClose 是點選黑背景做的事 通常也是點選關閉
fullWidth 可以設定其寬度

      <Dialog
        open={Open}
        keepMounted
        onClose={handleClose}
        fullWidth={true}
        maxWidth="md"
      >
        <DialogTitle id="customized-dialog-title" onClose={handleClose}>
         盒子資訊
        </DialogTitle>

        <Divider style={{backgroundColor:"#707070"}} ></Divider>
        <DialogContent>
          <Box style={{ fontSize: "22px", margin: "0 5%" }}>
          這盒子是方形的
          </Box>
        </DialogContent>

      </Dialog>

D15